<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <!-- <div class="particle-container">
        <vue-particles id="tsparticles" :options="particleOptions" />
      </div> -->
      <Header></Header>
      <div class="dataScreen-main">
        <router-view></router-view>
      </div>
      <!-- <slot></slot> -->
      <el-footer class="footer"></el-footer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "./Header.vue";
import { ref, onMounted, onBeforeUnmount } from "vue";

const dataScreenRef = ref<HTMLElement | null>(null);
onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>

<style lang="scss" scoped>
@import "../assets/style/index.scss";
</style>
